<template>

  <div class="app-container">

    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">

      <el-form-item label="影票订单信息ID" prop="ticketOrderInfoId">

        <el-input

          v-model="queryParams.ticketOrderInfoId"

          placeholder="请输入影票订单信息ID"

          clearable

          size="small"

          @keyup.enter.native="handleQuery"

        />

      </el-form-item>

      <el-form-item label="票号" prop="ticketNo">

        <el-input

          v-model="queryParams.ticketNo"

          placeholder="请输入票号"

          clearable

          size="small"

          @keyup.enter.native="handleQuery"

        />

      </el-form-item>

      <el-form-item label="打印标识 Y-已打印，N-未打印" prop="printFlag">

        <el-select v-model="queryParams.printFlag" placeholder="请选择打印标识 Y-已打印，N-未打印" clearable size="small">

          <el-option

            v-for="dict in printFlagOptions"

            :key="dict.dictValue"

            :label="dict.dictLabel"

            :value="dict.dictValue"

          />

        </el-select>

      </el-form-item>

      <el-form-item>

        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>

        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>

      </el-form-item>

    </el-form>



    <el-row :gutter="10" class="mb8">

      <el-col :span="1.5">

        <el-button

          type="primary"

          icon="el-icon-plus"

          size="mini"

          @click="handleAdd"

          v-hasPermi="['order:ticketOrderTicketInfo:add']"

        >新增</el-button>

      </el-col>

      <el-col :span="1.5">

        <el-button

          type="success"

          icon="el-icon-edit"

          size="mini"

          :disabled="single"

          @click="handleUpdate"

          v-hasPermi="['order:ticketOrderTicketInfo:edit']"

        >修改</el-button>

      </el-col>

      <el-col :span="1.5">

        <el-button

          type="danger"

          icon="el-icon-delete"

          size="mini"

          :disabled="multiple"

          @click="handleDelete"

          v-hasPermi="['order:ticketOrderTicketInfo:remove']"

        >删除</el-button>

      </el-col>

      <el-col :span="1.5">

        <el-button

          type="warning"

          icon="el-icon-download"

          size="mini"

          @click="handleExport"

          v-hasPermi="['order:ticketOrderTicketInfo:export']"

        >导出</el-button>

      </el-col>

      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>

    </el-row>



    <el-table v-loading="loading" :data="ticketOrderTicketInfoList" @selection-change="handleSelectionChange">

      <el-table-column type="selection" width="55" align="center" />

      <el-table-column label="影票订单信息ID" align="center" prop="ticketOrderInfoId" />

      <el-table-column label="⾏号ID" align="center" prop="rowId" />

      <el-table-column label="⾏号名称" align="center" prop="rowNa" />

      <el-table-column label="列号ID" align="center" prop="columnId" />

      <el-table-column label="列号名称" align="center" prop="columnNa" />

      <el-table-column label="⼆维码" align="center" prop="infoCode" />

      <el-table-column label="座位码" align="center" prop="seatCode" />

      <el-table-column label="票号" align="center" prop="ticketNo" />

      <el-table-column label="打印标识 Y-已打印，N-未打印" align="center" prop="printFlag" :formatter="printFlagFormat" />

      <el-table-column label="影票价格" align="center" prop="ticketPrice" />

      <el-table-column label="影票⼿续费" align="center" prop="ticketFee" />

      <el-table-column label="影票服务费" align="center" prop="serviceFee" />

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">

        <template slot-scope="scope">

          <el-button

            size="mini"

            type="text"

            icon="el-icon-edit"

            @click="handleUpdate(scope.row)"

            v-hasPermi="['order:ticketOrderTicketInfo:edit']"

          >修改</el-button>

          <el-button

            size="mini"

            type="text"

            icon="el-icon-delete"

            @click="handleDelete(scope.row)"

            v-hasPermi="['order:ticketOrderTicketInfo:remove']"

          >删除</el-button>

        </template>

      </el-table-column>

    </el-table>



    <pagination

      v-show="total>0"

      :total="total"

      :page.sync="queryParams.pageNum"

      :limit.sync="queryParams.pageSize"

      @pagination="getList"

    />



    <!-- 添加或修改影票订单影票信息对话框 -->

    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>

      <el-form ref="form" :model="form" :rules="rules" label-width="80px">

        <el-form-item label="影票服务费" prop="id">

          <el-input v-model="form.id" placeholder="请输入影票服务费" />

        </el-form-item>

        <el-form-item label="影票订单信息ID" prop="ticketOrderInfoId">

          <el-input v-model="form.ticketOrderInfoId" placeholder="请输入影票订单信息ID" />

        </el-form-item>

        <el-form-item label="⾏号ID" prop="rowId">

          <el-input v-model="form.rowId" placeholder="请输入⾏号ID" />

        </el-form-item>

        <el-form-item label="⾏号名称" prop="rowNa">

          <el-input v-model="form.rowNa" placeholder="请输入⾏号名称" />

        </el-form-item>

        <el-form-item label="列号ID" prop="columnId">

          <el-input v-model="form.columnId" placeholder="请输入列号ID" />

        </el-form-item>

        <el-form-item label="列号名称" prop="columnNa">

          <el-input v-model="form.columnNa" placeholder="请输入列号名称" />

        </el-form-item>

        <el-form-item label="⼆维码" prop="infoCode">

          <el-input v-model="form.infoCode" type="textarea" placeholder="请输入内容" />

        </el-form-item>

        <el-form-item label="座位码" prop="seatCode">

          <el-input v-model="form.seatCode" placeholder="请输入座位码" />

        </el-form-item>

        <el-form-item label="票号" prop="ticketNo">

          <el-input v-model="form.ticketNo" placeholder="请输入票号" />

        </el-form-item>

        <el-form-item label="打印标识 Y-已打印，N-未打印" prop="printFlag">

          <el-select v-model="form.printFlag" placeholder="请选择打印标识 Y-已打印，N-未打印">

            <el-option

              v-for="dict in printFlagOptions"

              :key="dict.dictValue"

              :label="dict.dictLabel"

              :value="dict.dictValue"

            ></el-option>

          </el-select>

        </el-form-item>

        <el-form-item label="影票价格" prop="ticketPrice">

          <el-input v-model="form.ticketPrice" placeholder="请输入影票价格" />

        </el-form-item>

        <el-form-item label="影票⼿续费" prop="ticketFee">

          <el-input v-model="form.ticketFee" placeholder="请输入影票⼿续费" />

        </el-form-item>

        <el-form-item label="影票服务费" prop="serviceFee">

          <el-input v-model="form.serviceFee" placeholder="请输入影票服务费" />

        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">

        <el-button type="primary" @click="submitForm">确 定</el-button>

        <el-button @click="cancel">取 消</el-button>

      </div>

    </el-dialog>

  </div>

</template>



<script>

  import { listTicketOrderTicketInfo, getTicketOrderTicketInfo, delTicketOrderTicketInfo, addTicketOrderTicketInfo, updateTicketOrderTicketInfo, exportTicketOrderTicketInfo } from "@/api/order/ticketOrderTicketInfo";



  export default {

    name: "TicketOrderTicketInfo",

    components: {

    },

    data() {

      return {

        // 遮罩层

        loading: true,

        // 选中数组

        ids: [],

        // 非单个禁用

        single: true,

        // 非多个禁用

        multiple: true,

        // 显示搜索条件

        showSearch: true,

        // 总条数

        total: 0,

        // 影票订单影票信息表格数据

        ticketOrderTicketInfoList: [],

        // 弹出层标题

        title: "",

        // 是否显示弹出层

        open: false,

        // 打印标识 Y-已打印，N-未打印字典

        printFlagOptions: [],

        // 查询参数

        queryParams: {

          pageNum: 1,

          pageSize: 10,

          ticketOrderInfoId: null,

          ticketNo: null,

          printFlag: null,

        },

        // 表单参数

        form: {},

        // 表单校验

        rules: {

        }

      };

    },

    created() {

      this.getList();

      this.getDicts("cinema_common_yn").then(response => {

        this.printFlagOptions = response.data;

      });

    },

    methods: {

      /** 查询影票订单影票信息列表 */

      getList() {

        this.loading = true;

        listTicketOrderTicketInfo(this.queryParams).then(response => {

          this.ticketOrderTicketInfoList = response.rows;

          this.total = response.total;

          this.loading = false;

        });

      },

      // 打印标识 Y-已打印，N-未打印字典翻译

      printFlagFormat(row, column) {

        return this.selectDictLabel(this.printFlagOptions, row.printFlag);

      },

      // 取消按钮

      cancel() {

        this.open = false;

        this.reset();

      },

      // 表单重置

      reset() {

        this.form = {

          id: null,

          ticketOrderInfoId: null,

          rowId: null,

          rowNa: null,

          columnId: null,

          columnNa: null,

          infoCode: null,

          seatCode: null,

          ticketNo: null,

          printFlag: null,

          ticketPrice: null,

          ticketFee: null,

          serviceFee: null

        };

        this.resetForm("form");

      },

      /** 搜索按钮操作 */

      handleQuery() {

        this.queryParams.pageNum = 1;

        this.getList();

      },

      /** 重置按钮操作 */

      resetQuery() {

        this.resetForm("queryForm");

        this.handleQuery();

      },

      // 多选框选中数据

      handleSelectionChange(selection) {

        this.ids = selection.map(item => item.id)

        this.single = selection.length!==1

        this.multiple = !selection.length

      },

      /** 新增按钮操作 */

      handleAdd() {

        this.reset();

        this.open = true;

        this.title = "添加影票订单影票信息";

      },

      /** 修改按钮操作 */

      handleUpdate(row) {

        this.reset();

        const id = row.id || this.ids

        getTicketOrderTicketInfo(id).then(response => {

          this.form = response.data;

          this.open = true;

          this.title = "修改影票订单影票信息";

        });

      },

      /** 提交按钮 */

      submitForm() {

        this.$refs["form"].validate(valid => {

          if (valid) {

            if (this.form.id != null) {

              updateTicketOrderTicketInfo(this.form).then(response => {

                this.msgSuccess("修改成功");

                this.open = false;

                this.getList();

              });

            } else {

              addTicketOrderTicketInfo(this.form).then(response => {

                this.msgSuccess("新增成功");

                this.open = false;

                this.getList();

              });

            }

          }

        });

      },

      /** 删除按钮操作 */

      handleDelete(row) {

        const ids = row.id || this.ids;

        this.$confirm('是否确认删除影票订单影票信息编号为"' + ids + '"的数据项?', "警告", {

          confirmButtonText: "确定",

          cancelButtonText: "取消",

          type: "warning"

        }).then(function() {

          return delTicketOrderTicketInfo(ids);

        }).then(() => {

          this.getList();

          this.msgSuccess("删除成功");

        })

      },

      /** 导出按钮操作 */

      handleExport() {

        const queryParams = this.queryParams;

        this.$confirm('是否确认导出所有影票订单影票信息数据项?', "警告", {

          confirmButtonText: "确定",

          cancelButtonText: "取消",

          type: "warning"

        }).then(function() {

          return exportTicketOrderTicketInfo(queryParams);

        }).then(response => {

          this.download(response.msg);

        })

      }

    }

  };

</script>
